<template>
	<div class="my-resource-edit" v-loading="loading">
		<div class="classIndex_h clear">
			<router-link to="/teach/teachresource/index" exact>我的资源</router-link>
			<strong> <i>></i>编辑资源</strong>
		</div>
		<!--  -->
		<div class="u_resource">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="resource-ruleForm">
				<el-form-item label="资源名称" prop="name">
					<el-input v-model.trim="ruleForm.name" maxlength="50" placeholder="最多可输入50个字" v-cloak></el-input>
				</el-form-item>

				<el-form-item label="分类" prop="cate_id" v-if='$store.state.isCheckLevel'>
					<el-select filterable v-model="ruleForm.cate_id"  placeholder="请选择">
						<el-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>

					<el-button @click='classificationViews = true' type='text' class='add-videoCate'>添加分类</el-button>
				</el-form-item>

				<template v-if='!$store.state.isSchool'>
					<el-form-item label-width="0">
						<el-col :span="8">
							<el-form-item label="学段" prop="study_section_id">
								<el-select filterable v-model="ruleForm.study_section_id" placeholder="请选择活" v-cloak @change="relateChange($event,'study_section')">
									<el-option v-for="(item, index) in orgLevel2" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="年级" prop="grade_id">
								<el-select filterable v-model="ruleForm.grade_id" placeholder="请选择活" v-cloak @change="relateChange($event,'grade')">
									<el-option v-for="(item, index) in orgLevel3" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="科目" prop="subject_id">
								<el-select filterable v-model="ruleForm.subject_id" placeholder="请选择活" v-cloak @change="relateChange($event,'subject')">
									<el-option v-for="(item, index) in orgSubject" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label-width="0">
						<el-col :span="8">
							<el-form-item label="版本" prop="version_id">
								<el-select filterable v-model="ruleForm.version_id" placeholder="请选择活" v-cloak @change="relateChange($event,'version')">
									<el-option v-for="(item, index) in orgVersion" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="教材" prop="material_id">
								<el-select filterable v-model="ruleForm.material_id" placeholder="请选择活" v-cloak @change="relateChange($event,'material')">
									<el-option v-for="(item, index) in orgMaterial" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="章" prop="list_1_id">
								<el-select filterable v-model="ruleForm.list_1_id" placeholder="请选择活" v-cloak @change="relateChange($event,'list_1')">
									<el-option v-for="(item, index) in orgList1" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label="节" prop="list_2_id" class="list_2_id">
						<el-col :span="8">
							<el-select filterable v-model="ruleForm.list_2_id" placeholder="请选择活" v-cloak>
								<el-option v-for="(item, index) in orgList2" :label="item.name" :value="item.id" :key="index"></el-option>
							</el-select>
						</el-col>
					</el-form-item>
				</template>
				<el-form-item label="简介" prop="profile">
					<el-input type="textarea" v-model.trim="ruleForm.profile" :rows="6" placeholder="不超200字" v-cloak maxlength="200" show-word-limit>
					</el-input>
				</el-form-item>
				<el-form-item label="权限" prop="authority">
					<el-radio-group v-model="ruleForm.authority" v-cloak>
						<el-radio :label="1">公开</el-radio>
						<el-radio :label="0">不公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="允许下载" prop="is_download">
					<el-radio-group v-model="ruleForm.is_download" v-cloak>
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item class="r_submitBox buttonCSS">
					<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
					<el-button type="primary" @click.prevent="submitForm('ruleForm')" v-preventReClick>保存</el-button>
				</el-form-item>
			</el-form>
		</div>



		<el-dialog title="视频分类" :visible.sync="classificationViews" width="500px" custom-class="Tailoring5" :close-on-click-modal="false" @close="ificationResetForm('classificationForm')">
			<div class="tailoring333">
					<el-form :model="classificationForm" ref="classificationForm" label-width="100px" class="demo-ruleForm">
					  <el-form-item
					    label="添加分类"
					    prop="name"
					    :rules="[
					      { required: true, message: '内容不能为空'},
					    ]"
					  >
					    <el-input type="text" v-model.trim="classificationForm.name" placeholder="输入视频分类，不超过8个字" maxlength="8"></el-input>
					    <el-button type="primary" @click="ificationSubmitForm('classificationForm')">提交</el-button>
					  </el-form-item >
					  	
					  <el-form-item label="分类管理" class='ificationS'>
					  	<el-tag
					  	v-for="(tag, index) in classificationList"
					  	:key="tag.id"
					  	closable
					  	 @close="videoCateClose(tag.id, index)">
					  	{{tag.name}}
					  </el-tag>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			orgLevel2: this.$g.orgLevel2,
			orgLevel3: [],
			orgSubject: [],
			orgVersion: [],
			orgMaterial: [],
			orgList1: [],
			orgList2: [],
			id: this.$route.query.id,
			ruleForm: {
				id: this.$route.query.id,
				name: undefined, //资源名称
				study_section_id: undefined, //学段
				grade_id: undefined, //年级
				subject_id: undefined, //科目
				version_id: undefined, //版本
				material_id: undefined, //教材
				list_1_id: undefined, // 章id
				list_2_id: undefined, // 节id
				authority: undefined, //权限
				is_download: undefined, //允许下载
				profile: undefined, //简介
				format_pdf: undefined,
				cate_id: undefined
			},
			rules: {
				name: [
					{ required: true, message: '资源名称不能为空', trigger: 'change' }
				],
				study_section_id: [
					{ required: true, message: '请选择学段', trigger: 'change' }
				],
				grade_id: [
					{ required: true, message: '请选择年级', trigger: 'change' }
				],
				subject_id: [
					{ required: true, message: '请选择科目', trigger: 'change' }
				],
				cate_id: [
					{ required: true, message: '请选择分类', trigger: 'change' }
				],
			},
			loading: false,
			classificationForm: {name: ''},
			classificationViews: false,
			classificationList: [],
		};
	},
	created() {
		this.resourceMsg();
		this.$store.state.isCheckLevel && this.getClassification()
	},
	computed: {

	},
	methods: {
		getClassification(){

			let success =(res)=>{
				this.classificationList = res.data
				this.classificationList.unshift({name: '全部', id: 0})
			}

			let params = {}
			this.$ajax.get('api/resource/resource_cate', { params, func: { success: success} })
		},
		videoCateClose(id, index){
			let success =(res)=>{
				this.$message.success(res.msg)
				this.classificationList.splice(index, 1)
				this.ruleForm.cate_id = undefined
			}

			let params = {id: id}
			this.$ajax.delete('api/resource/resource_cate', { params, func: { success: success} })
		},
		getvideoCate(){
			let success =(res)=>{
				this.$message.success(res.msg)
				this.getClassification()
			}

			let data = {name: this.classificationForm.name}
			this.$ajax.post('api/resource/resource_cate',  data, {func: { success: success} })
		},
		ificationSubmitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

					this.getvideoCate()
					this.$refs[formName].resetFields();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		ificationResetForm(formName){
			this.$refs[formName].resetFields();
			this.classificationViews = false
		},
		//数据请求
		resourceMsg() {
			let success = (res => {
				let data = res.data[0];
				this.orgLevel2 = this.$g.orgLevel2; 
				this.ruleForm.name = data.name,
					this.ruleForm.study_section_id = parseInt(data.study_section_id) === 0 ? undefined : data.study_section_id, //学段
					this.ruleForm.grade_id = parseInt(data.grade_id) === 0 ? undefined : data.grade_id , //年级
					this.ruleForm.subject_id = parseInt(data.subject_id) === 0 ? undefined : data.subject_id , //科目
					this.ruleForm.version_id = parseInt(data.version_id) === 0 ? undefined : data.version_id, //版本
					this.ruleForm.material_id = parseInt(data.material_id) === 0 ? undefined : data.material_id, //教材
					this.ruleForm.list_1_id = parseInt(data.list_1_id) === 0 ? undefined : data.list_1_id, // 章id
					this.ruleForm.list_2_id = parseInt(data.list_2_id) === 0 ? undefined : data.list_2_id, // 节id
					this.ruleForm.authority = data.authority, //权限
					this.ruleForm.is_download = data.is_download, //允许下载
					this.ruleForm.profile = data.profile, //简介
					this.ruleForm.cate_id = data.cate_id

				// this.getOrgLevel2()
				this.getOrgLevel3();
				this.getSubject();
				this.getVersion();
				this.getMaterial();
				this.getList1();
				this.getList2();
			});
			this.$ajax({
				url: '/api/resource/resource',
				method: 'get',
				params: { id: this.id },
				func: { success: success }
			})
		},
		/**
		 * 联动下拉框的方法
		 * @DateTime 2020-03-05T10:44:43+0800
		 * @param    {[type]}                 newVal [选中的id]
		 * @param    {[type]}                 type   [类型]
		 * @return   {[type]}                        [description]
		 */
		relateChange(newVal, type) {

			switch (type) {
				case 'study_section':
					this.ruleForm.grade_id = undefined;
					this.ruleForm.subject_id = undefined;
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgLevel3 = [];
					this.orgSubject = [];
					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.ruleForm.study_section_id = newVal;
					this.getOrgLevel3();
					break;
				case 'grade':
					this.ruleForm.subject_id = undefined;
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgSubject = [];
					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];


					this.ruleForm.grade_id = newVal;
					this.getSubject();

					break;
				case 'subject':
					this.ruleForm.version_id = undefined;
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgVersion = [];
					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.ruleForm.subject_id = newVal
					this.getVersion();

					break;
				case 'version':
					this.ruleForm.material_id = undefined;
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgMaterial = [];
					this.orgList1 = [];
					this.orgList2 = [];

					this.ruleForm.version_id = newVal;
					this.getMaterial();
					break;
				case 'material':
					this.ruleForm.list_1_id = undefined;
					this.ruleForm.list_2_id = undefined;

					this.orgList1 = [];
					this.orgList2 = [];

					this.ruleForm.material_id = newVal;
					this.getList1();

					break;
				case 'list_1':
					this.ruleForm.list_2_id = undefined;

					this.orgList2 = [];

					this.ruleForm.list_1_id = newVal;
					this.getList2();
					break;
				default:
					break;

			}
		},
		//获取学段
		getOrgLevel2() {
			let success = (res => {
				let data = res.data;
				this.orgLevel2 = data
			});
			let params = {
				level: 2,
				pid: 1,
				direction: 'balance',
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_org', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			}

		},
		//获取年级
		getOrgLevel3() {
			let success = (res => {
				let data = res.data;
				this.orgLevel3 = data;

			});
			let params = {
				level: 3,
				pid: this.ruleForm.study_section_id,
				direction: 'balance',
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_org', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/org/org', { params: params, func: { success: success } })
			}
		},
		//获取科目
		getSubject(flag) {
			let success = (res => {
				let data = res.data;
				this.orgSubject = data;

			});

			let params = {
				type: 2,
				org_id: this.ruleForm.grade_id,
				status: 1,
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_subject', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/cate/subject', { params: params, func: { success: success } })
			}
		},
		//获取版本
		getVersion() {
			let success = (res => {
				let data = res.data;
				this.orgVersion = data;


			})
			this.$ajax({
				url: 'api/cate/version',
				method: 'get',
				params: {
					org_id: this.ruleForm.grade_id,
					sub_id: this.ruleForm.subject_id,
					type: 2,
					status: 1
				},
				func: { success: success }
			})
		},
		//获取教材
		getMaterial() {
			let success = (res => {
				let data = res.data;
				this.orgMaterial = data;
			})
			let params = {
				org_id: this.ruleForm.grade_id,
				sub_id: this.ruleForm.subject_id,
				ver_id: this.ruleForm.version_id,
				status: 1
			}

			if (this.$store.state.isCheckLevel) {
				this.$ajax.get('api/newlevel/platform_material', { params: params, func: { success: success } })
			} else {
				this.$ajax.get('api/cate/material', { params: params, func: { success: success } })
			}

		},
		//获取章
		getList1() {
			let success = (res => {
				let data = res.data;
				this.orgList1 = data;

			});
			this.$ajax({
				url: 'api/cate/cate_list',
				method: 'get',
				params: {
					pid: 0,
					level: 1,
					material_id: this.ruleForm.material_id,
				},
				func: { success: success }
			})
		},
		//获取节
		getList2() {
			let success = (res => {
				let data = res.data;
				this.orgList2 = data;
			});
			this.$ajax({
				url: 'api/cate/cate_list',
				method: 'get',
				params: {
					pid: this.ruleForm.list_1_id,
					level: 2,
					material_id: this.ruleForm.material_id
				},
				func: { success: success }
			})
		},
		/**
		 * 数据提交
		 * @DateTime 2020-03-05T11:08:28+0800
		 * @param    {[type]}                 formName [description]
		 * @return   {[type]}                          [description]
		 */
		submitForm(formName) {

			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true

					let params = this.ruleForm
					let success = (res => {
						let data = res.data;

						if (this.roleBaseid(4) && this.ruleForm.authority == 1) {
							this.$message.success('修改成功，请等待管理员审核')
						} else {
							this.$message.success(res.msg);
						}

						setTimeout(() => {
							this.loading = false
							this.$router.push({ path: '/teach/teachresource/index' })
						}, 800);

					});

					/*根据角色判断上传的资源是否要审核 1.正常 2.审核中*/
					this.ruleForm.status = this.roleBaseid(4, 5) ? 2 : 1

					this.$ajax({
						url: 'api/resource/vue_resource',
						method: 'put',
						data: params,
						func: { success: success }
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {

			this.$router.back(-1)
		},

	}
}
</script>
<style lang="scss">
.my-resource-edit {
	.u_resource {
		padding: 0;
		margin-bottom: 0;
		min-height: initial;
		box-shadow: none;
		border-radius: 0 0 5px 5px;
	}
	.r_typeClass>div:nth-of-type(3n) {
		margin: 0 22px 0 0;
	}
}
</style>